<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>
            {{name}}
        </h1>
        <h1>
            {{score_math}}
        </h1>
    </div>
    <div id="root1">
        <h1>男生</h1>
        <ul>
            <li v-for="stu in stus_m">
                {{stu.name}}
            </li>  
        </ul>

        <h1>女生</h1>
        <ul>
            <li v-for="stu in stus_f">
                {{stu.name}}
            </li>  
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    name:'aa',
                   score_chinese:'59',
                    score_math:'98',
                }
            },
            methods:{

            },
            computed:{
                score_avg:{
                    get(){
                         return ((this.score_chinese+this.score_math)/2)
                    }
                }
            }
        });
        const vm = app.mount("#root");

        const app1 = Vue.createApp({
            data(){
                return{
                    students:[{
                        name:"aaa",
                        sex:"男",
                    },
                    {
                        name:"bbb",
                        sex:"男",
                    },
                    {
                        name:"ccc",
                        sex:"女",
                    },
                    {
                        name:"ddd",
                        sex:"女",
                    },
                    ]
                }
            },
            computed:{
                stus_m(){
                   return this.students.filter((i)=>{return i.sex === '男'})
                },
                stus_f(){
                   return this.students.filter((i)=>{return i.sex === '女'})
                },
            }
        });
        const vm1 = app1.mount("#root1"); 
    </script>
</body>
</html>